﻿<div data-bind="dxDeferRendering: {
    showLoadIndicator: true,
    staggerItemSelector: '.dx-list-item',
    animation: 'stagger-3d-drop',
    renderWhen: modelIsReady
}">
    <div id="myList" style="margin: 10px;" data-bind="dxList: {
        dataSource: listDataSource
    }">
        <div class="listItem" data-options="dxTemplate:{ name:'item' }">
            <div style="display:inline-block; margin: 5px;">
                <img style="margin:5px;" data-bind="attr: { src: $root.getImagePath(name) }" />
            </div>
            <div style="display:inline-block; margin: 5px;">
                <p style="font-size:larger;"><b data-bind="text: name"></b></p>
                <p>Capital: <i data-bind="text: capital"></i></p>
            </div>
        </div>
    </div>
</div>